<template>
    <div class="bigBox">
        <!-- <router-link  to="/UnreadInfoReply">  
            <div style="width:20px;height:20px;backgroundColor:red;">点击这里进行反馈</div>
        </router-link> -->
        <!-- 预览样式 -->
        <!-- <div class="switch-container">
            预览样式
            <button class="btn1">浅色</button>
            <button type="primary" class="btn1">深色</button>
            <button type="primary" class="btn1">布局切换</button>
        </div> -->
        <!-- 简历完善度 -->
        <div class="switch-container">
            <!-- <span class="wanshan">简历完善度</span> -->
            <span class="wanshan">简历完善度得分：{{score}}分</span>
        </div>
        <!-- 主体部分 -->
        <div class="block main-container">
            <el-timeline>
                <!-- 简历未查看需要反馈 -->
                <el-timeline-item placement="top" color="green" size="large" class="item-container fankuiBox">
                    <img src="../../assets/talent-icon/icon1-1.png" class="my-icon1">
                    <el-card class="card-container">
                        <h4 class="distance textB">反馈状态</h4>
                        <span>还未反馈</span>
                        <el-button class="fanKui" @click="reply">点击这里进行反馈</el-button>
                        <div>创建时间：</div>
                    </el-card>
                </el-timeline-item>
                <!-- 简历未通过 -->
                <el-timeline-item placement="top" color="green" size="large" class="item-container meiguoBox">
                    <img src="../../assets/talent-icon/icon1-2.png" class="my-icon1">
                    <el-card class="card-container">
                        <h4 class="distance textB">求职状态</h4>
                        <div class="distance">
                            <span>是否通过：</span>
                            <span style="color:red">未通过</span>
                        </div>
                        <div class="distance">
                            <span>具体原因：{{inforDetail.tRemark}}</span>
                            <span></span>
                        </div>
                        <div>审核时间：</div>
                    </el-card>
                </el-timeline-item>
                <!-- 已录用的简历 -->
                <el-timeline-item placement="top" color="green" size="large" class="item-container luyongBox">
                    <img src="../../assets/talent-icon/icon1-3.png" class="my-icon1">
                    <el-card class="card-container">
                        <h4 class="distance textB">求职状态</h4>
                        <span class="distance">
                            <span>是否通过：</span>
                            <span style="color:red">已通过</span>
                        </span>
                        <el-button class="fanKui" @click="dealEntry">点击这里办理入职手续</el-button>
                        <div>审核时间：</div>
                    </el-card>
                </el-timeline-item>
                <!-- 已入职的简历 -->
                <el-timeline-item placement="top" color="green" size="large" class="item-container ruzhiBox">
                    <img src="../../assets/talent-icon/icon1-4.png" class="my-icon1">
                    <el-card class="card-container">
                        <h4 class="distance textB">入职状态</h4>
                         <div class="distance">
                            <span>是否入职：</span>
                            <span style="color:red">已入职</span>
                        </div>
                        <div>入职时间：</div>
                    </el-card>
                </el-timeline-item>

                <el-timeline-item placement="top" size="large">
                    <img src="../../assets/talent-icon/icon2.png" class="my-icon1">
                    <el-card>
                        <h4 class="distance textB">基本概要</h4>
                        <div class="distance">
                            <span style="font-weight:600;font-size:16px;">{{inforDetail.tName}}</span>&nbsp;&nbsp;
                            <span>{{inforDetail.tSex}}</span>&nbsp;
                            <span>{{inforDetail.tNation}}</span>&nbsp;
                            <span>学历:{{inforDetail.tStudy}}</span>&nbsp;
                            <span>身高:{{inforDetail.tHeight}}</span>
                        </div>
                        <div class="distance">
                            <span>出生日期：{{inforDetail.tFirstDate}}</span>&nbsp;&nbsp;&nbsp;
                            <span>现年：{{inforDetail.tAge}}</span>
                        </div>
                         <div class="distance">
                            <span>应聘岗位：{{inforDetail.tJob}}</span>&nbsp;&nbsp;&nbsp;
                            <span>期望月薪：</span>
                            <span style="color:red;">{{inforDetail.tSalary}}</span>
                        </div>    
                    </el-card>
                </el-timeline-item>
                <el-timeline-item placement="top">
                    <img src="../../assets/talent-icon/icon3.png" class="my-icon1">
                    <el-card>
                        <h4 class="distance textB">联系方式</h4>
                        <p class="distance">电话：{{inforDetail.tPhone}}</p>
                        <p class="distance">邮箱：{{inforDetail.tEmail}}</p>
                    </el-card>
                </el-timeline-item>
                <el-timeline-item placement="top">
                    <img src="../../assets/talent-icon/icon4.png" class="my-icon1">
                    <el-card>
                        <h4 class="distance textB">教育背景</h4>
                        <div>
                            <span class="distance complete">完善此项：+15分</span>
                            <el-button class="fanKui">点击这里完善此项</el-button>
                        </div>
                        <!-- <div>教育背景内容</div> -->   
                    </el-card>
                </el-timeline-item>
                <el-timeline-item placement="top">
                    <img src="../../assets/talent-icon/icon5.png" class="my-icon1">
                    <el-card>
                        <h4 class="distance textB">掌握技能</h4>
                        <div>
                            <span class="distance complete">完善此项：+15分</span>
                            <el-button class="fanKui">点击这里完善此项</el-button>
                        </div>
                        <!-- <div>掌握技能内容</div> -->   
                    </el-card>
                </el-timeline-item>
                <el-timeline-item placement="top">
                    <img src="../../assets/talent-icon/icon6.png" class="my-icon1">
                    <el-card>
                        <h4 class="distance textB">工作经历</h4>
                        <div>
                            <span class="distance complete">完善此项：+15分</span>
                            <el-button class="fanKui">点击这里完善此项</el-button>
                        </div>
                        <!-- <div>工作经历内容</div> -->   
                    </el-card>
                </el-timeline-item>
                <el-timeline-item placement="top">
                    <img src="../../assets/talent-icon/icon7.png" class="my-icon1">
                    <el-card>
                        <h4 class="distance textB">自我评价</h4>
                        <div>
                            <span class="distance complete">完善此项：+15分</span>
                            <el-button class="fanKui">点击这里完善此项</el-button>
                        </div>
                        <div>自我评价内容</div>   
                    </el-card>
                </el-timeline-item>
            </el-timeline>
            
        </div>
        




        
    </div>
</template>

<script>
export default {
    name:"InfoDetail",
    data() {
      return {
        inforDetail:[],
        // 简历得分
        score:0,
        
      };
    },
    props:['id','status'],
    mounted() {
        this.chooseinfo();
        this.getInfo();
        
    },
    beforeDestroy () {
        this.changePage = 1
        this.changeLimit = 10
        this.inputValue = ''
    },

    methods: {
        //点击反馈按钮到反馈页面
        reply(){
            //console.log(this.id)
            //console.log(this.inforDetail.tPhone)
            this.$router.push({
                name:'UnreadInfoReply',
                params:{id:this.id,phone:this.inforDetail.tPhone,name:this.inforDetail.tName},                
            })
        },
        //点击办理入职手续,跳转到入职手续页面
        dealEntry(){
            this.$router.push({
                name:"AcceptedInfoReply",
                params:{id:this.id,phone:this.inforDetail.tPhone,name:this.inforDetail.tName},
            })
        },
        //根据传进来的状态判断显示哪一个盒子fankuiBox meiguoBox luyongBox ruzhiBox
        chooseinfo(){
            //console.log(this.id)
            //console.log(this.status);
            let fankuiBox=document.getElementsByClassName("fankuiBox")[0];
            let meiguoBox=document.getElementsByClassName("meiguoBox")[0];
            let luyongBox=document.getElementsByClassName("luyongBox")[0];
            let ruzhiBox=document.getElementsByClassName("ruzhiBox")[0];
            //console.log(meiguoBox)
            if(this.status=='未查看'){
                meiguoBox.style.display="none";
                luyongBox.style.display="none";
                ruzhiBox.style.display="none";
            }
            if(this.status=='未通过'){
                fankuiBox.style.display="none";
                luyongBox.style.display="none";
                ruzhiBox.style.display="none";
            }
             if(this.status=='已通过'){
                fankuiBox.style.display="none";
                meiguoBox.style.display="none";
                ruzhiBox.style.display="none";
            }
            if(this.status=='已入职'){
                fankuiBox.style.display="none";
                meiguoBox.style.display="none";
                luyongBox.style.display="none";
            }
        },
        //获取当前数据
        getInfo(){
            //console.log(this.id)
            
            this.$axios({
                methods:"get",
                url:`http://132.232.110.185/personnelManagement/talents/oneShowList/${this.id}`,
            })
            .then(
                (res)=>{
                    //console.log(res);
                    //console.log(res.data.data);
                    this.inforDetail=res.data.data
                    this.getScore()
                    
                },
                (err)=>{}
            )            
        },
        // 简历得分
        getScore(){
            //console.log(this.score);
            //console.log(this.inforDetail);
            if(this.inforDetail.tName!=''){
                this.score=this.score+10
            }
            if(this.inforDetail.tSex.length!=0 && this.inforDetail.tSex != null){
                //console.log("判断是否有性别");
                this.score=this.score+10
            }
            if(this.inforDetail.tNation!="" && this.inforDetail.tNation != null){
                //console.log("判断是否有民族");
                this.score=this.score+10
            }
            if(this.inforDetail.tStudy !=''&& this.inforDetail.tStudy != null){
                this.score=this.score+10
            }
            if(this.inforDetail.tHeight !=''&& this.inforDetail.tSex != null){
                this.score=this.score+10
            }
            if(this.inforDetail.tFirstDate !=''&& this.inforDetail.tFirstDate != null){
                this.score=this.score+10
            }
            if(this.inforDetail.tAge !=''&& this.inforDetail.tAge != null){
                this.score=this.score+10
            }
            if(this.inforDetail.tPhone !=''&& this.inforDetail.tPhone != null){
                this.score=this.score+10
            }
            if(this.inforDetail.tEmail !=''&& this.inforDetail.tEmail != null){
                this.score=this.score+10
            }
            if(this.inforDetail.tSalary !=''&& this.inforDetail.tSalary != null){
                this.score=this.score+10
            }
            console.log(this.score);
            return this.score
        }
    },
}
</script>

<style scoped>
    .bigBox{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top:15px;
        margin-bottom: 15px;
    }
    /* 预览央视三个按钮 */
    .btn1{
        height:30px;
        background-color: rgb(25,166,137);
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
        border: none;
        border-radius: 5px;
        color:white;
        margin-left:10px;
        vertical-align: middle;
    }
    .btn1:hover{
        background-color: rgb(12, 109, 90);
    }
    /* 预览这一行 */
    .switch-container{
        /* border:1px solid red; */
        text-align: center;
        margin-bottom: 25px;
    }
    /* 简历完善度这一行 */
    .wanshan{
        /* border:1px solid pink; */
        width:100px;
        height:30px;
        line-height:30px;
        background-color: rgb(237,86,102);
        font-size:12px;
        color:white;
        border-radius: 5px;
        padding: 8px;
        margin-right:10px;
    }
     .wanshan:hover{
        background-color: rgb(174, 56, 68);
     }
    .allScore{
        /* border:1px solid pink; */
        width:100px;
        height:30px;
        line-height:30px;
        background-color: rgb(249, 141, 159);
        font-size:12px;
        color:white;
        border-radius: 5px;
        padding: 8px;
    }
    .allScore:hover{
        background-color: rgb(218, 127, 142);
    }
    /* 内容主体部分 */
    .main-container{
        width:90%;
        margin:auto;
    }
    .item-container{
        position: relative;
    }
    /* 一个方块主体 */
    /* .card-container{
        
    } */
    /* 反馈按钮 */
    .fanKui{
        border:none;
        font-weight: 600;
        color:red;
    }
    /* 自己插入的图片图标 */
    .my-icon1{
        height:33px;
        width:33px;
        display: inline-block;
        position:absolute;
        top:1px;
        left:-10px;
        /* border: 1px solid black; */
        border-radius: 33px;
    }
    /* 设置上下间距 */
    .distance{
        margin-bottom: 8px;
    }
    /* 完善字 */
    .complete{
        color:rgb(27,179,148);
        font-weight:600;
    }
    /* 小标题文字 */
    .textB{
        font-size:18px;
    }
</style>